<template>
  <div class="traveler-list-poup">
    <!--出行人添加/编辑弹窗-->
    <van-popup 
      v-model="showPicker"
      position="bottom"
      :style="{height: '78%','padding-bottom':'20px', overflow:'hidden'}">
        <div class="van-hairline--top-bottom van-picker__toolbar">
          <button class="van-picker__cancel" @click="cancel">取消</button>
          <div class="van-ellipsis van-picker__title">还需选中<span class="c-buy">{{lastNum}}个</span>{{traveler_type_name}}</div>
          <button class="van-picker__confirm" @click="onConfirm">确认</button>
        </div>

        <div class="traveler-list">
          <div class="traveler-hd text-center">
            <van-button plain hairline type="primary" @click="travelerAdd"><van-icon name="plus"/>新增{{traveler_type_name}}</van-button>
          </div>
          <div class="traveler-bd">
          <!--单个出行人-->
          <template v-if="traveler_allow_num==1">
            <van-radio-group v-model="checked[0]">
            <ul>
                <li v-for="(item, index) in travelersList" :key="index">
                    <div class="item-l" @click="toggle(index)">
                        <van-radio ref="checkboxes" :name="`${item.id}`"/>
                        <div class="info">
                          <b>{{item.name}}</b>
                          <p v-if="item.note" class="c-main">{{item.note}}</p>
                          <p v-else>{{item.identity[0].name}} {{item.identity[0].code}}</p>
                        </div>
                        <div class="commonly-used c-main" v-if="item.is_default==1">常用</div>
                    </div>
                    <div class="item-r" @click="eidtTraveler(index)" :data-id='`${item.id}`'><van-icon class-prefix="ucai-icon" name="bianji1"/></div>
                </li>
            </ul>
            </van-radio-group> 
          </template>
           <!--多个出行人-->
          <template v-else>
            <van-checkbox-group v-model="checked" :max="maxTraveler">
            <ul>
                <li v-for="(item, index) in travelersList" :key="index">
                    <div class="item-l" @click="toggle(index)">
                        <van-checkbox ref="checkboxes" :name="`${item.id}`" shape="square" :disabled="is_disabled"/>
                        <div class="info">
                          <b>{{item.name}}</b>
                          <p v-if="item.note" class="c-main">{{item.note}}</p>
                          <p v-else>{{item.identity[0].name}} {{item.identity[0].code}}</p>
                        </div>
                        <div class="commonly-used c-main" v-if="item.is_default==1">常用</div>
                    </div>
                    <div class="item-r" @click="eidtTraveler(index)" :data-id='`${item.id}`'><van-icon class-prefix="ucai-icon" name="bianji1"/></div>
                </li>
            </ul>
            </van-checkbox-group>
          </template>
          </div>

        </div>
    </van-popup>

    <!--出行人添加编辑弹窗-->
    <traveler-edit-popup :show.sync="show" :travelersList="travelersList" :traveler_index="traveler_index" :lastNum="lastNum" :selected_traveler="selected_traveler" :title="title" :eidt_id="eidt_id" :eidt_name="eidt_name" :eidt_phone="eidt_phone" :eidt_identity_name="eidt_identity_name" :eidt_identity_kind="eidt_identity_kind" :eidt_identity_code="eidt_identity_code" :eidt_commonly='eidt_commonly' :id_name_list="id_name_list" :id_key_list="id_key_list"/>
  </div>
</template>

<script>
	import { 
    Icon,
    Toast,
    Button,
    Popup,
    Radio,
    RadioGroup, 
    Checkbox,
    CheckboxGroup,
  } from "vant"
  import travelerEditPopup from '@views/booking/components/traveler-edit-popup';

  export default {
    name: "traveler-list-popup",
    data(){
        return {
          title: `编辑${this.traveler_type_name}`,
          show: false,
          is_disabled: false,

          traveler_allow_num:0, //出行人列表可选人数
          checked:[],

          eidt_id:"0", //编辑出行人id
          eidt_name: "", //编辑出行人姓名
          eidt_phone: "", //编辑出行人电话
          eidt_identity_name:"身份证",//编辑出行人证件名称cn
          eidt_identity_kind: "0", //编辑出行人证件名称id
          eidt_identity_code: "",  //编辑出行人证件号码
          eidt_commonly:'', //编辑出行人是否设为常用信息
        }
    },

    components:{
      [Icon.name]: Icon,
      [Toast.name]: Toast,
      [Button.name]: Button,
      [Popup.name]: Popup,
      [Radio.name]: Radio,
      [RadioGroup.name]: RadioGroup, 
      [Checkbox.name]: Checkbox,
      [CheckboxGroup.name]: CheckboxGroup,
      [travelerEditPopup.name]: travelerEditPopup,
    },

    props: {
      traveler_type_name:{
        type: String
      },
      showPicker: {
        type: Boolean
      },
      travelersList:{
        type: Array
      },
      traveler_checked:{
        type: Array
      },
      selected_traveler:{
        type: Array
      },
      traveler_index:{
        type: Number
      },
      traveler_num:{
       type: Array
      },
      id_name_list:{
        type: Array
      },
      id_key_list:{
        type: Array
      }
    },

    computed: {
      //最大出行人
      maxTraveler(){
        if(this.traveler_num){
          this.traveler_allow_num = this.traveler_num[this.traveler_index];
          this.traveler_num[this.traveler_index] ? this.is_disabled = false : this.is_disabled = true;
          return this.traveler_num[this.traveler_index];
        }
      },

      //还需选中多少个出行人
      lastNum(){
        var last_num = 0;
        if(this.maxTraveler>0){
          last_num = this.maxTraveler - this.checked.length
        }
        return last_num;
      },
    },

    watch: {
      selected_traveler(newVal) {
        let selected_id = [];
        newVal[this.traveler_index].forEach((v, k) => {
            selected_id.push(String(v.id));
        });
        this.checked = [].concat(selected_id);
      },

      traveler_checked(newVal) {
        this.checked = newVal;
      },
    },

    methods:{
        //显示编辑弹窗
        travelerAdd(){
          this.show = true;
          this.title = `新增${this.traveler_type_name}`;
          this.eidt_id = "0";
          this.eidt_name = "";
          this.eidt_phone = "";
          this.eidt_commonly = false;
          this.eidt_identity_name = "身份证";
          this.eidt_identity_kind = "0";
          this.eidt_identity_code = "";
        },

        //显示编辑弹窗
        eidtTraveler(index){
          this.show = true;
          this.title = `编辑${this.traveler_type_name}`;

          if(this.travelersList[index]){
            let selected_info = this.travelersList[index];
            this.eidt_id = String(selected_info.id);
            this.eidt_name = selected_info.name;
            this.eidt_phone = selected_info.phone;
            this.eidt_commonly = selected_info.is_default==1 ? true : false;
            //判断证件信息是否完善
            if(selected_info.note){
              this.eidt_identity_name = "身份证";
              this.eidt_identity_kind = "0";
              this.eidt_identity_code = "";
            }else{
              this.eidt_identity_name = selected_info.identity[0].name;
              this.eidt_identity_kind = String(selected_info.identity[0].kind);
              this.eidt_identity_code = selected_info.identity[0].code;
            }
          }
          else{
            this.eidt_id = "0";
            this.eidt_name = "";
            this.eidt_phone = "";
            this.eidt_commonly = false;
            this.eidt_identity_name = "身份证";
            this.eidt_identity_kind = "0";
            this.eidt_identity_code = "";
          }
        },

        //取消
        cancel() {
          this.$emit('update:showPicker', false)
        },

        //确认
        onConfirm() {
          this.$emit('update:showPicker', false);
          if(this.traveler_num){
              //套餐选中的出行人
              let newTraveler = [];
              for (var i = 0; i < this.travelersList.length; i++) {
                  this.travelersList[i].active = false;
                  for (var c = 0; c < this.checked.length; c++) {
                    if (this.travelersList[i].id === Number(this.checked[c])) {
                      this.travelersList[i].active = true;
                      let oldItem = this.travelersList[i];
                      newTraveler.push(oldItem);
                      this.travelersList.splice(i, 1);
                      this.travelersList.unshift(oldItem);  //更新列表排序
                      break;
                    }
                  }
              }
              newTraveler.reverse();
              this.selected_traveler[this.traveler_index].splice(0,this.selected_traveler[this.traveler_index].length);
              this.selected_traveler[this.traveler_index].push(...newTraveler); //更新已选出行人
          }
        },

        toggle(index) {
            if(this.lastNum==0 && this.traveler_allow_num>1){
              Toast(`您只需选中${this.checked.length}个${this.traveler_type_name}`);
              return false;
            }
            this.$refs.checkboxes[index].toggle();
        } 
    }
  }
</script>

<style lang="less" scoped>
@import "~@style_m/basic/utils/index";
/deep/ .van-checkbox__icon--disabled .van-icon{
  border-color:#ccc;
}
/deep/ .van-radio,.van-checkbox{
  overflow: inherit;
}

.traveler-list-poup{
  .van-picker__toolbar{
    background: #f8f8f8;
    width: 100%;
  }
  .van-picker__cancel{
    color: #999;
  }
  .van-button{
    height: 40px;
    line-height: 38px;
    width: 66%;
  }
}

.traveler-list{
    padding: 0 16px;
    height: 100%;
    position: relative;
    z-index: 9;

    .traveler-hd{
      padding: 18px 0;
      height: 40px;
    }
    .traveler-bd{
      height: calc(100% - 126px);
      overflow-y: auto;
      -webkit-overflow-scrolling:touch;
    }
    ul{
        position: relative;
        width: 100%;
        overflow: hidden;
        vertical-align: middle;

        li{
            position: relative;
            display: flex;
            box-sizing: border-box;
            width: 100%;
            overflow: hidden;
            line-height: 60px;

            &:after {
              position: absolute;
              -webkit-box-sizing: border-box;
              box-sizing: border-box;
              content: ' ';
              pointer-events: none;
              right: 0;
              bottom: 0;
              left: 0;
              border-bottom: 1px solid #e5e5e5;
              -webkit-transform: scaleY(0.5);
              transform: scaleY(0.5);
            }

            .item-l{
                display: flex;
                align-items: center;
                width: 100%;
                .info{
                  margin-left:20px;
                }
                .commonly-used{
                  display: flex;
                  flex: 1;
                  justify-content: flex-end;
                  margin-right:50px;
                }
            }

            .item-r{
                font-size:18px;
            }

            b{
              display: block;
              line-height: 22px;
            }

            p{
              color: #999;
              line-height: 18px;
              font-size: 12px;
              width: 100%;
            }
            
        }
    }
}
</style>
